import React, { useRef } from "react";
import './index.scss'

function AddInput(props) {
    // 对isInputShow 进行判断
    const { isInputShow, addItem } = props,
        inputRef = useRef();

    // useRef 可以拿到input中的值
    const submitValue = () => {
        const inputValue = inputRef.current.value.trim();
        // 对input中的值 进行判断 没有值返回空
        if (inputValue.length === 0) {
            return;
        }
        // input有值 调用app中的addItem 把新值添加，然后清空输入框
        addItem(inputValue)
        inputRef.current.value = ''
    }
    return (
        <>
            {
                isInputShow
                    ?
                    (
                        <div className="input-wrapper">
                            <input
                                type="text"
                                ref={inputRef}
                                placeholder="请输入代办事件"
                            />
                            <button className="btn btn-primary"
                                onClick={submitValue}
                            >
                                增加
                            </button>
                        </div>
                    )
                    :
                    ''
            }
        </>
    )
}

export default AddInput